<!DOCTYPE html>
<html lang="GB">

<head>
    <meta property="og:title" content="BuilderStars">
    <meta property="og:type" content="website">
    <meta property="og:url" content="http://www.builderstars.co.uk">
    <meta property="og:site_name" content="BuilderStars">
    <title>Tradesman Signup | Builderstars.co.uk</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="keywords" content="handyman, repair, tradesman, tradesmen, find tradesmen, local tradesman, local tradesmen, local handyman, recommendation service">
    <meta name="description" content="Builderstarss is the best way to find a local and trusted tradesman to do your job.">
    <link rel="icon" href="http://localhost:8888/public/assets/img/favicon.ico" type="image/x-icon">
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <style>
        #step-2 {
            display:none;
        }
        
        .reg-btns{
            padding:12px;
        }
        
        #reg-steps{
            width:250px;
        }
        
        #reg-steps span {
            display:inline;
            padding-right:7px;
            font-size:13px;
        }
        
        #reg-steps span:nth-child(1){
            border-right:1px solid #000;
            color:red;
        }
        
        #reg-loadbar {
            background-color:#0000ff;
            width:250px;
            border:1px solid #0000ff;
            border-radius:10px;
            height:4px;
        }
        
        #reg-form div label, input{
            display:block;
        }
        
        #ste-2 input[type="submit"], button {
            display:inline;
        }
    </style>
</head>
<body>
    
    <div id="reg-header">        
        <div id="reg-steps">
            <span>Basic details</span>
            <span>Your trades</span>
        </div>
        <div id="reg-loadbar"></div>
    </div>
        
    <div id="registration">
        {{ Form::open(array('route' => 'register.store')) }}
    
       @if($errors->any())
           <ul>
               {{ implode('', $errors->all('<li>:message</li>')) }}
           </ul>
        @endif
        
        <div id="step-1">
            {{ Form::label('firstname', 'First Name') }}
            {{ Form::text('firstname') }}
            
            {{ Form::label('lastname', 'Last Name') }}
            {{ Form::text('lastname') }}
            
            {{ Form::label('email', 'Email Address') }}
            {{ Form::email('email') }}
            
            {{ Form::label('mobile', 'Mobile phone') }}
            {{ Form::text('mobile') }}
            
            {{ Form::label('postcode', 'Postcode') }}
            {{ Form::text('postcode') }}
            
            <button data-step="2" class="reg-btns" id="basic-btn">Next: Your trades</button>
        </div>
        <div id="step-2">
            <div id="selected-trades"></div>
            <select name="trades" required="required" id="ui">
                <option value="" selected="selected">Please select</option>
                <option value="90">Architectural Designer</option>
                <option value="61">Bathroom Fitter</option>
                <option value="62">Bricklayer</option>
                <option value="91">Carpet Fitter</option>
                <option value="65">Chimney &amp; Fireplace Specialist</option>
                <option value="59">Conservatory Installer</option>
                <option value="54">Conversion Specialist</option>
                <option value="76">Damp Proofing Specialist</option>
                <option value="66">Demolition Contractor</option>
                <option value="57">Driveway Paver</option>
                <option value="67">Electrician</option>
                <option value="55">Extension Builder</option>
                <option value="68">Fencer</option>
                <option value="69">Flooring Fitter</option>
                <option value="46">Garage &amp; Shed Builder</option>
                <option value="43">Gas Engineer</option>
                <option value="70">Groundworker</option>
                <option value="85">Handyman</option>
                <option value="71">Heating Engineer</option>
                <option value="47">Insulation Installer</option>
                <option value="60">Kitchen Fitter</option>
                <option value="72">Landscape Gardener</option>
                <option value="45">Loft Conversion Specialist</option>
                <option value="56">New Home Builder</option>
                <option value="73">Painter &amp; Decorator</option>
                <option value="77">Plasterer</option>
                <option value="78">Plumber</option>
                <option value="74">Restoration &amp; Refurb Specialist</option>
                <option value="79">Roofer</option>
                <option value="81">Security System Installer</option>
                <option value="82">Stonemason</option>
                <option value="44">Tiler</option>
                <option value="89">Tree Surgeon</option>
                <option value="83">Window Fitter</option>
            </select> <br />
            {{ Form::hidden('hidden-trades', array('id' => 'hidden-trades')) }}
            <span> You can select up to 10 trades.</span>
            {{ Form::submit('Sign up now', array('class' => 'reg-btns')) }}
            <button data-step="1" class="reg-btns" id="trades-btn">Back</button>
        </div>
        </form>
    </div>
    
        
<script>
    $(document).ready(function(){
    
        $("#basic-btn").click(function(){
            $("#step-1").css({"display" : "none"});
            $("#step-2").css({"display" : "block"});
            $("#reg-steps span:nth-child(1)").css({"color" : "black"});
            $("#reg-steps span:nth-child(2)").css({"color" : "red"});
        }); 
        
        $("#trades-btn").click(function(){
            $("#step-1").css({"display" : "block"});
            $("#step-2").css({"display" : "none"});
            $("#reg-steps span:nth-child(1)").css({"color" : "red"});
            $("#reg-steps span:nth-child(2)").css({"color" : "black"});
        }); 
        
        var countTrades = 0;
        var selectedTradesArr = [];
        
        $("select").on("change", function(){
                  countTrades = countTrades + 1;
                   
                  if(countTrades > 10) {
                      alert("You can't select more than 10 trades");
                  } else {
                      if(indexOf.call(selectedTradesArr, $("select option:selected").attr("value")) != -1){
                          alert('You have already selected this trade');
                      } else {
                          var tmpHtml = $("#selected-trades").html();
                          var modifiedTrade = "<span data-tradeNumber='" + $("select option:selected").attr("value") + "'>" + countTrades + ".  " + $("select option:selected").text() + "</span>";
                          $("#selected-trades").html(tmpHtml + modifiedTrade + "<br />");
                          selectedTradesArr.push($("select option:selected").attr("value"));
                      }
                  }
           
              
        });
         
        var indexOf = function(needle) {
            if(typeof Array.prototype.indexOf === 'function') {
                indexOf = Array.prototype.indexOf;
            } else {
                indexOf = function(needle) {
                    var i = -1, index = -1;

                    for(i = 0; i < this.length; i++) {
                        if(this[i] === needle) {
                            index = i;
                            break;
                        }
                    }

                    return index;
                };
            }

            return indexOf.call(this, needle);
        }; 
    });
</script>    
</body>
</html>